<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的订单</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->

		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../css/icons-extra.css" />
		<!--<link rel="stylesheet" href="css/style.css" />-->
		<link rel="stylesheet" href="../css/iconfont.css" />


		<link rel="stylesheet" href="../css/mui.min.css">
		<link href="../css/app.css" rel="stylesheet" type="text/css">
		<!--<link rel="stylesheet" href="css/style.css" />-->
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/scroll_style.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css">
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<style>
			h5 {
				margin: 5px 7px;
			}
			.mui-card .mui-control-content {
				padding: 10px;
			}
			
			.mui-control-content {
				height: 550px;
			}
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			#kefu {
				font-size: 0.5rem;
				line-height: 30px;
			}
			
			header button img {
				width: 0.3rem;
			}
			.mui-bar{box-shadow: 0 0 1px rgba(255, 255, 255, 1);}
			.mui-content {
				
				background-color: #fff;
			}
			.mui-segmented-control {
				border-bottom: 3px solid #eeeeee!important;
			}
			.mui-content .mui-segmented-control{
				border: none;
			
			}
			.mui-content .mui-segmented-control a {
				color :#000000 !important;
				border-left: none;
			}
			.mui-content .mui-segmented-control a:hover {
				background-color: #FFFFFF !important;
                    border-bottom: 1px solid #31569d ;
			}
			.mui-segmented-control .mui-active{
				    color:#31569d !important ;
                    background-color: #FFFFFF !important;
                    border-bottom: 2px solid #31569d ;
			}
			.mui-table-view-cell {
				width: 68%;
			}
			.mui-table-view-cell .greentip {
				width: 68%;
				height: 36px;
				background-color: #aab940 !important;
				border-radius:0 4px 4px 0 !important; ;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav" style="padding-right: 15px;">
			<h1 id="title" class="mui-title">医护圈</h1>
			
			<!--<a class="mui-icon mui-icon-phone mui-pull-right"></a>-->
		</header>
		<div class="mui-content">
			<div style="padding: 10px 10px;">
				<div id="segmentedControl" class="mui-segmented-control">
					<a class="mui-control-item mui-active" href="#item1">文章</a>
					<a class="mui-control-item" href="#item2">好友</a>
					<a class="mui-control-item" href="#item3">圈子</a>
					<!--<a class="mui-control-item" href="#item4">已完成</a>-->
				</div>
			</div>
			
			
			<div>
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<!--<ul class="mui-table-view">
								<li class="mui-table-view-cell greentip">
									预约时间：2017/09/05 08:00-10:00
								</li>
								<li class="mui-table-view-cell">
									<strong>地址</strong>：长春市宽城区国家级科技…
								</li>
								<li class="mui-table-view-cell">
									<strong>发布者</strong>：张鑫
								</li>
								<li class="mui-table-view-cell">
									<strong>服务项目</strong>：新生儿家具护理及指导
								</li>
								<li class="mui-table-view-cell">
									<strong>服务费</strong>：<s>430元/2次</s>
								</li>
								<li class="mui-table-view-cell">
									系统推荐订单：抢单可额外获得爱心值20！
								</li>
							</ul>-->
						</div>
					</div>
				</div>
				<div id="item2" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第二个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第二个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第二个选项卡子项-3
						</li>
					</ul>
				</div>
				<div id="item3" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第三个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第三个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第三个选项卡子项-3
						</li>
					</ul>
				</div>
				<div id="item4" class="mui-control-content">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">
							第4个选项卡子项-1
						</li>
						<li class="mui-table-view-cell">
							第4个选项卡子项-2
						</li>
						<li class="mui-table-view-cell">
							第4个选项卡子项-3
						</li>
					</ul>
				</div>
			</div>
		
		
		
		
		
		
		<!--<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="subpages/tab-webview-subpage-home.html">
			</span>
				<span class="mui-icon iconfont icon-icon-test"></span>
				
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="subpages/tab-webview-subpage-service.html">
				<span class="mui-icon iconfont icon-jk"></span>
				<span class="mui-tab-label">资讯</span>
			</a>
			<a class="mui-tab-item" href="subpages/tab-webview-subpage-order.html">
				<span class="mui-icon iconfont icon-dd"></span>
				<span class="mui-tab-label">订单</span>
			</a>
			<a class="mui-tab-item" href="subpages/tab-webview-subpage-talk.html">
				<span class="mui-icon iconfont icon-ly"></span>
				<span class="mui-tab-label">信息</span>
			</a>

			<a class="mui-tab-item" href="subpages/tab-webview-subpage-my.html">
				<span class="mui-icon iconfont icon-wd"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>-->

		<script src="../js/mui.min.js"></script>
		<script src="../js/app.js"></script>
		<script type="text/javascript" src="../js/xiangyingshi.js"></script>
		<!--<script type="text/javascript" src="../js/index.js"></script>-->
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);
		</script>
		<script>
			
		</script>

	</body>

</html>